<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Network Management System</title>

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

 <script type="text/javascript" src="jquery-1.js"></script>

  <script type="text/javascript" src="jquery.js"></script>

 
 <script type="text/javascript">

    $(document).ready(function() {



      $('#container').contextMenu('myMenu1', {

        bindings: {

          'details': function(t) {

            alert('Trigger was '+t.id+'\nAction was Details');

          },

          'check': function(t) {

            alert('Trigger was '+t.id+'\nAction was Check');

          },

          'detect': function(t) {

            alert('Trigger was '+t.id+'\nAction was Detect Faults');

          },

          'delete': function(t) {

            alert('Trigger was '+t.id+'\nAction was Delete');

          }

        }

      });
});
</script>

<!--
<script  type="text/javascript" src="drag_n_drop.js"></script>
<script>
        function drawImage(imageObj){
            var stage = new Kinetic.Stage("container", 600, 594);
            var container = stage.getContainer();
            var container = stage.getCanvas();
            var rectX = container.width / 2 - 40 / 2;
            var rectY = container.height / 2 - 23 / 2;
            var draggingRect = false;
            var draggingRectOffsetX = 0;
            var draggingRectOffsetY = 0;
 
            var  DrawImg = Kinetic.drawImage(imageObj, rectX, rectY, 40, 23);
            var  Img = new Kinetic.Shape(DrawImg);
 
             Img.addEventListener("mousedown", function(){
                draggingRect = true;
                var mousePos = stage.getMousePos();
 
                draggingRectOffsetX = mousePos.x -  Img.x;
                draggingRectOffsetY = mousePos.y -  Img.y;
            });
             Img.addEventListener("mouseover", function(){
                document.body.style.cursor = "pointer";
            });
             Img.addEventListener("mouseout", function(){
                document.body.style.cursor = "default";
            });
 
            stage.add(Img);
 
            container.addEventListener("mouseout", function(){
                draggingRect = false;
            }, false);
 
            container.addEventListener("mousemove", function(){
                var mousePos = stage.getMousePos();
                if (draggingRect) {
                     Img.x = mousePos.x - draggingRectOffsetX;
                     Img.y = mousePos.y - draggingRectOffsetY;
                     Img.draw();
                }
            }, false);
            container.addEventListener("mouseup", function(){
                draggingRect = false;
            });
        }
 
        
		
		window.onload = function(){
            // load image
            var imageObj = new Image();
            imageObj.onload = function(){
                drawImage(imageObj);
			//var imageObj2 = new Image();
          //  imageObj2.onload = function(){
          //      drawImage(imageObj2);

			
            };
            imageObj.src = "images/router.png";
			//imageObj2.src = "images/router_icon.jpg";
				
			
        };
		
		
    </script>
    -->
    
<script type="text/javascript" src="kinetic-dnd2.js"></script>
<script>
        function loadImages(sources, callback){
            var images = {};
            var loadedImages = 0;
            var numImages = 0;
            for (var src in sources) {
                numImages++;
            }
            for (var src in sources) {
                images[src] = new Image();
                images[src].onload = function(){
                    if (++loadedImages >= numImages) {
                        callback(images);
                    }
                };
                images[src].src = sources[src];
            }
        }
 
        function initStage(images){
            var stage = new Kinetic.Stage("container", 590, 600);
 
            // router 1
            var router1Img = new Kinetic.Image({
                imageObj: images.router1,
                x: 100,
                y: 40,
                width: 40,
                height: 23
            });
 
            router1Img.draggable(true);
 
            router1Img.on("mousedown", function(){
                router1Img.moveToTop();
                stage.draw();
            });
            router1Img.on("mouseover", function(){
                document.body.style.cursor = "pointer";
            });
            router1Img.on("mouseout", function(){
                document.body.style.cursor = "default";
            });
 
            stage.add(router1Img);
 
            // router 2
            var router2Img = new Kinetic.Image({
                imageObj: images.router2,
                x: 350,
                y: 55,
                width: 40,
                height:23
            });
 
            router2Img.draggable(true);
 
            router2Img.on("mousedown", function(){
                router2Img.moveToTop();
                stage.draw();
            });
            router2Img.on("mouseover", function(){
                document.body.style.cursor = "pointer";
            });
            router2Img.on("mouseout", function(){
                document.body.style.cursor = "default";
            });
 
            stage.add(router2Img);
        
		
		//router 3
		  
            var router3Img = new Kinetic.Image({
                imageObj: images.router3,
                x: 160,
                y: 140,
                width: 40,
                height: 23
            });
 
            router3Img.draggable(true);
 
            router3Img.on("mousedown", function(){
                router3Img.moveToTop();
                stage.draw();
            });
            router3Img.on("mouseover", function(){
                document.body.style.cursor = "pointer";
            });
            router3Img.on("mouseout", function(){
                document.body.style.cursor = "default";
            });
 
            stage.add(router3Img);
			
			//router 4
		  
            var router4Img = new Kinetic.Image({
                imageObj: images.router3,
                x: 260,
                y: 140,
                width: 40,
                height: 23
            });
 
            router4Img.draggable(true);
 
            router4Img.on("mousedown", function(){
                router4Img.moveToTop();
                stage.draw();
            });
            router4Img.on("mouseover", function(){
                document.body.style.cursor = "pointer";
            });
            router4Img.on("mouseout", function(){
                document.body.style.cursor = "default";
            });
 
            stage.add(router4Img);
		}
 
        window.onload = function(){
            var sources = {
                router1: "images/router.png",
                router2: "images/router.png",
				router3: "images/router.png"
            };
            loadImages(sources, initStage);
        };
    </script>

<link href="c1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrap">
  <div id="header"></div>
  <div id="menu">
    <table id="menu_ngang" width="1000" border="0">
      <tr>
        <td width="178" align="center"><strong><a href="user_management.htm">USER MANAGEMENT</a></strong></td>
        <td width="202" align="center"><strong><a href="device_management.htm">DEVICE MANAGEMENT</a></strong></td>
        <td width="204" align="center"><strong><a href="fault_management.htm">FAULT MANAGEMENT</a></strong></td>
        <td width="173" align="left"><strong><a href="help.htm">HELP</a></strong></td>
        <td width="147" align="center">&nbsp;</td>
      </tr>
    </table>
  </div>
  <div id="main">
    <div id="leftmain">

    <div style="display: none;" class="contextMenu" id="myMenu1" >

      <ul>

        <li id="details"><img src="images/detail.png" width="16" height="16" /> Details</li>

        <li id="check"><img src="images/Check-icon.png" width="16" height="16" />Check device</li>

        <li id="detect"><img src="images/detect.png" width="16" height="16" /> Detect Faults</li>

        <li id="delete"><img src="images/cross.png" width="16" height="16"/> Delete</li>

      </ul>
    </div>
    </div>
    <div id="rightmain">
      
      <div id="list">Device: 
       <ul>

        <li id="details"><img src="images/detail.png" width="16" height="16" /> Details</li>

        <li id="check"><img src="images/Check-icon.png" width="16" height="16" />Check device</li>

        <li id="detect"><img src="images/detect.png" width="16" height="16" /> Detect Faults</li>

        <li id="delete"><img src="images/cross.png" width="16" height="16"/> Delete</li>

      </ul>
</div>
      <div id="timkiem"></div>
      <div id="quangcao"></div>
    </div>
    <div class="container" id="container"></div>
  </div>
  <div id="footer">
    <strong>LUẬN VĂN TỐT NGHIỆP - KHOA MẠNG MÁY TÍNH VÀ TRYỀN THÔNG</strong>
    <p><strong><span class="foot">© 2012</span></strong></p>
  </div>
</div>
</body>
</html>

